<template>
  <div id="item-bank" class="jx-content">
    <!-- 导入试题弹出框 -->

    <div class="btn-group fr">
      <el-form :inline="true">
        <el-form-item>
            <router-link class="button-style" to="/MyCourses/Examination/TopicModel">生成试卷</router-link>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="date" label="试卷名称"></el-table-column>
      <el-table-column prop="date" label="考试班级" width="180"></el-table-column>
      <el-table-column prop="name" label="班级年级" width="180"></el-table-column>
      <el-table-column prop="address" label="状态"></el-table-column>
      <el-table-column prop="laiyuan" label="试卷时长"></el-table-column>
      <el-table-column prop="laiyuan" label="考试结束时间"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="dialogStartExam = true" type="text" size="small">开始考试</el-button>
          <router-link to="/MyCourses/Examination/AddChoice/ApprovalTest">试题审批</router-link>
          <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">查看试卷</el-button>
          <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="100" layout="total, prev, pager, next, jumper" :total="400"></el-pagination>
    <el-dialog class="dialog-start-exam" title="开始考试" :visible.sync="dialogStartExam" width="30%">
      <div class="dialog-content">
        <div class="start-exa-title">XXXXX班级<span class="c-red">注：按照默认班级进行考试</span></div>
        <div class="start-exam-switch">
          <span>手动选班</span>
          <el-switch v-model="dialogStartExamSwitch"></el-switch>
        </div>
        <el-form v-if="dialogStartExamSwitch" :inline="true" :model="dialogStartExamForm" ref="dialogStartExamForm" class="start-exam-form">
          <el-form-item label="年份">
            <el-date-picker v-model="dialogStartExamForm.year" type="year" placeholder="选择年"></el-date-picker>
          </el-form-item>
          <el-form-item label="班级">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in dialogStartExamForm.options" :key="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogStartExam = false">开始考试</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //开始考试弹出框Start the exam
      dialogStartExam: false,
      //手动选班开关
      dialogStartExamSwitch: true,
      //form
      dialogStartExamForm: {
        year: '2018',
        options: [
          {
            key: 1,
            value: "一班"
          },
          {
            key: 2,
            value: "二班"
          }
        ]
      },
      //导入试题弹出框
      dialogImportQuestions: false,
      dialogImportQuestionsRadio: "1",
      searchForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      currentPage: 10,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          laiyuan: "laiyuan"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          laiyuan: "laiyuan"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address:
            "上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄",
          laiyuan: "laiyuan"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          laiyuan: "laiyuan"
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    handleSizeChange() {},
    handleCurrentChange() {},
    //编辑实验环境弹出关闭
    dialogImportQuestionsClose() {},
    //编辑实验环境弹出确定
    dialogImportQuestionsSubmit() {}
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#item-bank {
  width: 1200px;
  margin: 50px auto;
  .dialog-start-exam {
    .el-dialog__body {
      padding-bottom: 0;
    }
    .dialog-content {
      padding:0 30px;
      .start-exam-form {
      }
      .start-exa-title {
        font-size: 18px;
        font-weight: bold;
        margin-top:10px;
        padding-left:10px;
        .c-red{
          font-size: 14px;
          font-weight: normal;
          margin-left:10px;
        }
      }
      .start-exam-switch {
        margin: 26px 0;
        padding-left:10px;
        > span {
          font-size: 16px;
          margin-right: 4px;
        }
        .el-switch {
          vertical-align: sub;
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
}
</style>
